import React, { useEffect, useState } from 'react';
import { Col, Row, Card, Progress, Statistic,Timeline,Tag } from 'antd';
import { RadarChartOutlined, SnippetsOutlined, DollarOutlined, LaptopOutlined,SmileOutlined } from "@ant-design/icons"
import './index.scss'
import EChartsReact from 'echarts-for-react';
import { type energyData, getDashboardApi } from '@/api/dashboard';


const Dashboard: React.FC = () => {
    const [seriesData, setSeriesData] = useState<any[]>([]);
    const [lengendData, setLengendData] = useState<string[]>([]);

    useEffect(() => {
        const fatchEnergyData = async function () {
            const res = await getDashboardApi();
            const result = res.data.map(item => {
                return {
                    name: item.name,
                    type: 'line',
                    stack: 'Total',
                    data: item.data
                }
            });
            setLengendData(res.data.map(item => item.name));
            setSeriesData(result);
        };
        fatchEnergyData();

    }, [])


    const option_energy = {
        title: {
            text: '当日能源消耗'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: lengendData,
            top: '10%',
            left: 'center'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['0:00', '4:00', '8:00', '12:00', '16:00', '20:00', '24:00']
        },
        yAxis: {
            type: 'value'
        },
        series: seriesData
    };

    const option_zizhi = {
        title: {
            text: '企业资质情况'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            top: '10%',
            left: 'center'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true
        },
        yAxis: {
            type: 'value'
        },
        xAxis: {
            type: 'category',
            boundaryGap: [0, 0.01],
            data: ['2014', '2016', '2018', '2020', '2022', '2024']
        },
        series: [
            {
                name: '科技企业',
                data: [40, 220, 378, 658, 1122, 1200],
                type: 'bar'
            },
            {
                name: '高新企业',
                data: [20, 39, 443, 490, 559, 762],
                type: 'bar'
            },
            {
                name: '国营企业',
                data: [50, 180, 260, 250, 224, 345],
                type: 'bar'
            }
        ]
    };
    const option_zulin = {
        tooltip: {
            trigger: 'item'
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true },
            },
            bottom: '5%',
        },
        legend: {
            top: '5px',
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data: [
                    { value: 1048, name: '在营' },
                    { value: 735, name: '已租' },
                    { value: 580, name: '出租' },
                    { value: 484, name: '续签' },
                    { value: 300, name: '新签' },
                    { value: 300, name: '待租' },
                ],
                label: {
                    show: true,
                    position: 'outer',

                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 30,
                        fontWeight: 'bold'
                    }
                }
            }
        ]
    };

    return (
        <div className="dashboard">
            <Row gutter={16}>
                <Col span={6}>
                    <Card>
                        <div className="card-content">
                            <div className="area">
                                <h2>13479</h2>
                                <p>园区总面积(平方米)</p>
                            </div>
                            <RadarChartOutlined className='icon' />
                        </div>
                    </Card>

                </Col>
                <Col span={6}>
                    <Card>
                        <div className="card-content">
                            <div className="area">
                                <h2>8635</h2>
                                <p>总租赁面积(平方米)</p>
                            </div>
                            <SnippetsOutlined className='icon' style={{ color: '#81c452' }} />
                        </div>
                    </Card>
                </Col>
                <Col span={6}>
                    <Card>
                        <div className="card-content">
                            <div className="area">
                                <h2>38764</h2>
                                <p>园区总产值(万元)</p>
                            </div>
                            <DollarOutlined className='icon' style={{ color: '#62c9cb' }} />
                        </div>
                    </Card>

                </Col>
                <Col span={6}>
                    <Card>
                        <div className="card-content">
                            <div className="area">
                                <h2>2874</h2>
                                <p>入住企业总数(家)</p>
                            </div>
                            <LaptopOutlined className='icon' style={{ color: '#e49362' }} />
                        </div>
                    </Card>

                </Col>

            </Row>
            <Row gutter={16} className='mt-3'>
                <Col span={12}>
                    <Card title="能源消耗情况">
                        <EChartsReact
                            option={option_energy} style={{ height: '400px', width: '100%' }} />
                    </Card>
                </Col>
                <Col span={12}>
                    <Card title="企业资质情况">
                        <EChartsReact
                            option={option_zizhi} style={{ height: '400px', width: '100%' }} />
                    </Card>
                </Col>
            </Row>
            <Row gutter={16} className='mt-3'>
                <Col span={12}>
                    <Card title="租赁情况">
                        <EChartsReact
                            option={option_zulin} style={{ height: '400px', width: '100%' }} />
                    </Card>
                </Col>
                <Col span={6}>
                    <Card title="充电桩使用情况" >
                        <div className="wrap">
                            <Progress type="circle" percent={75} />
                            <Statistic title="总充电数" value={75} suffix="/ 100" />
                        </div>
                    </Card>
                </Col>
                <Col span={6}>
                    <Card title="实施车辆信息" >
                        <div className="wrap" style={{ overflow: 'auto' }}>
                            <Timeline
                                items={[
                                    {
                                        color: 'green',
                                        children: <><Tag color="green">进场</Tag>12:00 车辆京A666</>,
                                    },
                                    {
                                        color: 'green',
                                        children: <><Tag color="green">进场</Tag>12:30 车辆京A666</>,
                                    },
                                    {
                                        color: 'red',
                                        children: <><Tag color="yellow">出场</Tag>13:30 车辆京A666</>,
                                    },
                                    
                                ]}
                            />
                            
                        </div>
                    </Card>
                </Col>
            </Row>

        </div>
    )
}
export default Dashboard;